<template >
    <div class="update-gender-container">
        <van-picker
            show-toolbar
            :columns="columns"
            @cancel="$emit('close')"
            @confirm="onConfirm"
            @change="onPickerChange"
        />
    </div>
</template>

<script>
import { editUserProfile } from '@/api/user'
    export default {
        name: 'updateGender',
        props:{
            value:{
                type: Number,
                required: true
            }
        },
        data() {
            return {
                columns: ['男','女'],
                localIndex: this.value, //默认的下标
            }
        },
        methods: {
            // 当选项改变的时候
            onPickerChange(picker,value,index){
                this.localIndex = index
            },
            async onConfirm(){
                this.$toast.loading({
                    message: '保存中...',
                    forbidclick: true //禁止点击背景
                })
                await editUserProfile({
                    gender: this.localIndex
                }) 

                this.$toast.success('修改成功')
                // 修改成功更新组件的name -> 关闭弹框
                this.$emit('input', this.localIndex)
                // this.$emit('input', this.localName)
                this.$emit('close')
            }
        },
    }
</script>

<style lang="less" scoped>

</style>